<div th:fragment="base">
    <style>
        .layui-input-block {
            margin-left: 10px;
            margin-right: 10px;
        }

        .layui-input-block input {
            color: #0C0C0C;
        }

        .ep-form-label {
            float: left;
            font-size: 20px;
            font-weight: bolder;
            display: block;
            line-height: 20px;
            text-align: right;
            margin-left: 10px;
            margin-right: 10px;
        }
        .ep-form-small_label{
            float: left;
            width: 200px;
            font-size: 16px;
            display: block;
            line-height: 20px;
            margin-left: 10px;
            margin-right: 10px;
        }

        .ep-form-item-require:after {
            display: inline-block;
            margin-left: 10px;
            content: "*";
            line-height: 1;
            font-size: 20px;
            color: #f5222d
        }

        .prompt-txt {
            font-size: 14px;
            line-height: 1.5;
            margin-top: 13px;
            color: #7a8087;
        }
    </style>
    <div class="layui-container">
        <form class="layui-form" action="" style="margin-top: 50px">
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">项目标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" id="title" required lay-verify="required" placeholder="请输入项目标题,最多26个字"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="prompt-txt layui-input-block">标题中需带有产品名称及类别，可添加宣传语作为副标题。<a
                        id="project_title_example">参考案例</a></label>
            </div>
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">项目短标题</label>
                <div class="layui-input-block">
                    <input type="text" name="shortTitle" id="shortTitle" required lay-verify="required" placeholder="请输入项目短标题,最多10个字"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="prompt-txt layui-input-block">用于首页推荐、榜单等。<a
                        id="project_shortTitle_example">参考案例</a></label>
            </div>
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">项目简介</label>
                <div class="layui-input-block">
                    <textarea style="resize: none;font-size: 16px;font-weight: 400" name="introduce" id="introduce"
                              placeholder="请填写项目简介，最多120个字" class="layui-textarea"></textarea></div>
                <label class="prompt-txt layui-input-block">简介需清晰准确地阐述项目核心内容，会随项目被分享到社交平台。<a
                        id="project_introduce_example">参考案例</a></label>
            </div>
            <label class="ep-form-label ep-form-item-require">项目类别</label>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <select id="type" name="type" lay-verify="required">
                        <option value=""></option>
                    </select>
                </div>
                <label class="prompt-txt layui-input-block"></label>
            </div>
            <label class="ep-form-label ep-form-item-require">众筹时长</label>
            <div class="layui-form-item">
                <label class="ep-form-small_label" style="width: 200px">申请开始众筹时间:</label>
                <div class="layui-input-block">
                <input type="text" id="project_time_from" name="fundBegin" required readonly
                       lay-verify="required" placeholder="申请开始众筹时间，请选择" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="ep-form-small_label">结束时间:</label>
                <div class="layui-input-block">
                <input type="text" id="project_time_to" name="fundEnd" required lay-verify="required" readonly
                       placeholder="项目结束时间，请选择" autocomplete="off" class="layui-input">
                </div>
            </div>
            <label class="prompt-txt layui-input-block">众筹时间不超过60天，建议众筹周期30-45天。由于审核需要花费时间，开始时间从3天以后开始</label>
            <div class="layui-form-item">
                <label class="ep-form-label ep-form-item-require">目标金额</label>
                <div class="layui-input-block">
                    <input type="goal" name="goal" id="goal" required lay-verify="required" placeholder="2元起，通过审核后不允许修改，请谨慎填写"
                           autocomplete="off" class="layui-input">
                </div>
                <label class="prompt-txt layui-input-block">制定金额目标，众筹结束后，如达到或超出将由平台结算给你，如未达到将全额退款给支持者。</label>
            </div>
            <div class="layui-form-item" style="float: right">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formDemo"
                            style="background-color: #FE6500; height: 40px">保存,进入下一步
                    </button>
                    <!--                <button type="reset" class="layui-btn layui-btn-primary">重置</button>-->
                </div>
            </div>
        </form>

        <script th:inline="javascript">
            //Demo
            layui.config({
                base: '/ep/',
                debug: true
            }).extend({
                xmSelect: 'lay/extends/xm-select',
                apexcharts: 'lay/extends/apexcharts.min',
                eleTree: 'lay/extends/eleTree'
            });
            layui.use(['form', 'layer', 'xmSelect', 'laydate'], function () {
                var form = layui.form
                    , layer = layui.layer
                    , xmSelect = layui.xmSelect
                    , laydate = layui.laydate
                    , typeSelect
                ,fundBegin,
                    fundEnd;
                initSelect();
                var project = [[${project}]];
                //监听提交
                form.on('submit(formDemo)', function (data) {
                    let index = layer.load('',{time: 5*1000});
                    // layer.msg(JSON.stringify(data.field));
                    var param = data.field;
                    var introduce = param.introduce
                    ,title = param.title
                    ,shortTitle = param.shortTitle
                    ,goal = param.goal;

                    if (introduce === ''||introduce.length == 0){
                        $("#introduce").focus()
                        layer.msg('必填项不能为空', {icon:5});
                        return false;
                    }
                    if (introduce.length > 120){
                        $("#introduce").focus()
                        layer.msg('简介不能超过120个字', {icon:5});
                        return false;
                    }
                    if (title.length > 26){
                        $("#title").focus()
                        layer.msg('标题不能超过26个字', {icon:5});
                        return false;
                    }
                    if (shortTitle.length > 10){
                        $("#shortTitle").focus()
                        layer.msg('短标题不能超过10个字', {icon:5});
                        return false;
                    }
                    if (!(/(^[1-9]\d*$)/.test(goal))) {
                        $("#goal").focus()
                        layer.msg('目标金额需要为正整数', {icon:5});
                        return false;
                    }else if (goal < 2){
                        $("#goal").focus()
                        layer.msg('目标金额需要大于等于2', {icon:5});
                        return false;
                    }
                    $.ajax({
                        url:"/web/creatProject",
                        type:"post",
                        data: param,
                        success:function (data) {
                            if (data.code == 200){
                                window.location.href = "/web/project_material?id="+data.data;
                                layer.close(index);

                            }
                        }
                    })
                    return false;
                });

                // 参考案例弹出
                $("#project_title_example").click(function () {
                    layer.alert('<p>▷ 国潮古建雷峰塔，全木质榫卯结构</p>' + '<p>▷ 潮玩｜Amber熊抱抱不止于大，可玩可收藏更治困</p>' + '<p>▷ 轻策卡牌棋子对抗类桌游《三千营》</p>'
                        , {title: "案例示范", area: $(window).width() <= 750 ? '95%' : '50%'})
                });
                $('#project_shortTitle_example').click(function () {
                    layer.alert('<p>▷ 国潮|古建雷峰塔</p>' + '<p>▷ Amber的熊抱抱</p>' + '<p>▷ 金戈铁马，驰骋疆场</p>'
                        , {title: "案例示范", area: $(window).width() <= 750 ? '95%' : '50%'})
                })
                $('#project_introduce_example').click(function () {
                    layer.alert('<p>▷ 推出榫卯结构木质模型，目的是让大家能够更直观的感受建筑美学。此次专门选了雷锋塔来做模型。因为榫卯结构第一次被发现是在河姆渡遗址，有六七千年的历史。河姆渡遗址在江南，雷峰塔也是在江南。选雷峰塔比较贴切，也符合我们的初衷，传播我们中华文化之美。</p>'
                        + '<p>▷ 熊抱抱出击！大大的身体拥有无限的能量，当重重困难来袭，熊抱抱就会化身超级英熊，打败所有的困难和丧气，陪伴你，治愈你，给你最温暖安心的拥抱！ 如果你有感到困顿迷茫的时候，就让Amber给你一个熊抱吧！</p>'
                        + '<p>▷ 《三千营》是一款模拟骑兵对决的卡牌棋子对抗游戏，双方玩家将扮演骑兵小队指挥官，为自己的骑兵小队组合合理的装备卡牌，在骑兵对冲中占据优势。</p>'
                        , {title: "案例示范", area: $(window).width() <= 750 ? '95%' : '50%'})
                })

                // 众筹时间
                var startTime = laydate.render({
                    elem: '#project_time_from',
                    type: 'date',
                    btns: ['clear', 'confirm'],
                    name: fundBegin,
                    trigger:'click',
                    // value: new Date(getBgDate()),
                    min: 3,// 默认最小值为3天后
                    max: 30,//默认最大值为30天以后
                    done: function (value, date) {
                        endTime.config.dateTime = "";
                        $("#project_time_to").val("")
                        endTime.config.min = {
                            date: date.date+1,
                            hours: date.hours,
                            minutes: date.minutes,
                            month: date.month-1,
                            seconds: date.seconds,
                            year: date.year,
                        }
                        endTime.config.max = {
                            date: date.date+1,
                            hours: date.hours,
                            minutes: date.minutes,
                            month: date.month+1,
                            seconds: date.seconds,
                            year: date.year,
                        }

                    }
                });
                var endTime = laydate.render({
                    elem: '#project_time_to',
                    type: 'date',
                    btns: ['clear', 'confirm'],
                    trigger:'click',
                    name: fundEnd
                });
                // 初始化下拉框
                function initSelect(){
                    $.ajax({
                        url:"/web/getProjectType",
                        type:"get",
                        success:function (data) {
                            var data = data.data;
                            var  str = "";
                            for (var i = 0;i < data.length;i++){
                                str += "<option value='"+data[i].code+"'>"+data[i].name+"</option>"
                            }
                            $("#type").append(str);
                            form.render();
                        }
                    })

                }
                // 标题的点击
                $("#project_material").click(function () {
                    if (project != null){
                        window.location.href = "/web/project_material?id=" + project.projectId;
                    }else{
                        layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
                    }
                })
                $("#project_base").click(function () {
                    if (project != null){
                        window.location.href = "/web/project_base?id=" + project.projectId;
                    }
                })
                $("#project_detail").click(function () {
                    console.log("???")
                    if (project != null){
                        window.location.href = "/web/project_detail?id=" + project.projectId;
                    }else{
                        layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
                    }
                })
                $("#project_reward").click(function () {
                    if (project != null){
                        window.location.href = "/web/project_reward?id=" + project.projectId;
                    }else{
                        layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
                    }
                })
                $("#project_team").click(function () {
                    if (project != null){
                        window.location.href = "/web/project_team?id=" + project.projectId;
                    }else{
                        layer.msg('请先完善基础信息，提交了基础信息以后才能看后面哦', {icon:5});
                    }
                })

            });
        </script>
    </div>
</div>
